const Status = {
  未开票: 1,
  已开票: 2,
}

const Type = {
  常电通: 1,
  鸣昂: 2,
}

const params = {
  pageNum: 1,
  pageSize: 10,
  telephone: '',
}

let total = 0;
let hasNext = false;
const container = document.getElementById('container')
const empty = document.getElementById('empty')
const modal = document.getElementById('modal')
const company = document.getElementById('company')
const telephone = document.getElementById('telephone')

function setRem() {
  const width = window.innerWidth
  const html = document.getElementsByTagName('html')
  if (width > 750) {
    html[0].style.fontSize = '7.5px'
  } else {
    html[0].style.fontSize = `${width / 100}px`
  }
}

/**
 * 生成 item 元素
 * @param {object} data 
 * @param {number} data.type 开票类型 1常电通 2鸣昂
 * @param {string} data.stationName 场站名称
 * @param {number} data.status 1未开票 2已开票
 * @param {string} data.orderNo 订单号
 * @param {string} data.startTime 开始充电时间
 * @param {string} data.endTime 结束充电时间
 * @param {number} data.electric 充电度数
 * @param {number} data.payment 应付金额
 * @param {string} data.createTime 创建时间
 * @param {number} data.realPayment 实付金额
 */
function generateItem(data) {
  const item = document.createElement('div')
  item.className = 'item'
  item.innerHTML = `
    <div class="item-header">
      <div class="item-header-title">${data.stationName}</div>
      <div class="item-header-extra" style="color: ${data.status === Status.未开票 ? '#FFA913' : '#A8A8A8;'}">${data.status === Status.未开票 ? '未开票' : '已开票'}</div>
    </div>
    <div class="item-content">
      <div class="item-content-cell">订单号：${data.orderNo}</div>
      <div class="item-content-cell">充电时间：${data.startTime}-${data.endTime}</div>
      <div class="item-content-cell">充电度数：${data.electric}度｜应付金额：¥${data.payment}</div>
    </div>
    <div class="item-footer">
      <div class="item-footer-time">${data.createTime}</div>
      <div class="item-footer-realPayment">
        <span>实付金额：</span>
        <span class="item-footer-realPayment-value">${data.realPayment}</span>
      </div>
    </div>
    ${data.status === Status.未开票 ? `<div class="item-action">
      <div class="item-action-btn" onclick="openModal(${data.type})">申请开票</div>
    </div>` : ''}
  `
  container.appendChild(item)
}

function getOrderList() {
  fetch('http://127.0.0.1:4523/m1/3889397-0-default/h5/orderList', {
    method: 'POST',
    body: JSON.stringify(params),
  }).then(res => {
    if (res.ok) {
      return res.json()
    }
  }).then(res => {
    const { code, data, totalCount } = res
    if (code === '200' && data.length) {
      empty.style.display = 'none'
      total += data.length
      hasNext = totalCount > total
      if (hasNext) {
        params.pageNum = params.pageNum + 1
      }
      data.forEach(item => generateItem(item))
    }
  })
}

function getUrlParams() {
  const urlParams = new URLSearchParams(location.search)
  params.telephone = urlParams.get('telephone')
}

function setPullUpRefresh() {
  let observer
  const callback = (entries) => {
    const entry = entries[0]
    if (entry && entry.isIntersecting && hasNext) {
      getOrderList()
    }
  }

  const options = {
    root: document.getElementById('root'),
    rootMargin: '0px 0px 200px 0px',
    threshold: 1,
  }
  observer = new IntersectionObserver(callback, options)
  observer.observe(document.getElementById('loadMore'))
}

function openModal(type) {
  company.innerText = type === Type.常电通 ? '常电通有限公司' : '鸣昂有限公司'
  telephone.innerText = type === Type.常电通 ? '0123-12345678' : '0123-12345678'
  modal.style.display = 'flex'
}

function closeModal() {
  modal.style.display = 'none'
}

(function() {
  setRem()
  getUrlParams()
  if (params.telephone) {
    getOrderList()
  }
  setPullUpRefresh()
})()